<template>
	<div class="wrap">
		<Gheader :showheader="data"></Gheader>
		<Scroll class="wrapper">
			<div>
				<!--头像及背景-->
				<div class="head-portrait">
					<!--头像及昵称-->
					<div class="photo-name">
						<div class="photo"@click="gotologin()"><img @click="gotoInformation()" :src="userhead.userheader" alt="" /></div>
						<p v-if="Object.keys(userhead).length!=0" @click="gotoInformation()">{{userhead.username}}</p>
						<p v-if="Object.keys(userhead).length==0" @click="gotologin()">登录/注册</p>
					</div>
					<!--账户提现-->
					<div class="withdrawal">
						<a>用户提现</a>
					</div>
				</div>
				<!--我的订单-->
				<div class="order">
					<!--标题及查看更多-->
					<div class="title-more">
						<span class="title">我的订单</span>
						<span class="more" @click="gotoLookorder()">查看更多</span>
					</div>
					<!--待支付,代发货,待收货及交易完成-->
					<div class="trading">
						<ul>
							<li class="bg-1" @click="gotoUnpaid()"><span>待支付</span></li>
							<li class="bg-2" @click="gotoDropshipping()"><span>代发货</span></li>
							<li class="bg-3" @click="gotoForthegoods()"><span>待收货</span></li>
							<li class="bg-4" @click="gotoThedeal()"><span>交易完成</span></li>
						</ul>
					</div>
				</div>
				<!--我的返金排号-->
				<div class="numeral">
					<div class="numeral-title">
						<span class="numeral-title-left">我的返金排号</span>
						<span class="numeral-title-right">查看更多</span>
					</div>
					<ul>
						<li v-for="item in  usernumeral">
							<span>{{item.time}}</span>
							<span>消费 : ¥{{item.consumption}}</span>
							<span>排号 : {{item.numeral}}</span>
						</li>
					</ul>
				</div>
				<!--多功能区-->
				<div class="functional-areas">
					<!--与我有关的项目-->
					<div class="functional-areas-top">
						<ul>
							<li><span>0</span><span>我的神灯值</span></li>
							<li><span>0</span><span>我的积分</span></li>
							<li><span>0</span><span>我的优惠券</span></li>
							<li><span>0</span><span>我的心得</span></li>
						</ul>
					</div>
					<!--下方官方提供的功能-->
					<div class="functional-areas-bottom">
						<ul>
							<li><span class="bg-1">实名认证</span></li>
							<li><span class="bg-2" @click="gotodizhi()">收货地址</span></li>
							<li><span class="bg-3">关注公众号</span></li>
							<li><span class="bg-4">客服反馈</span></li>
						</ul>
					</div>
				</div>
				
		</div>
	</Scroll>
	<div class="mask">
		
	</div>
	<!--登录与注册选择按钮-->
	<div class="registered-login-btn">
		<span @click="login()">登录</span>
		<span @click="tanchuang2()">注册</span>
		<div @click="cancelbtn()"></div>
	</div>
	<!--登录-->
	<div class="registered-login tanchuang1 ">
		<div class="titles"><span>注册</span><span>密码登录</span><span>快速登录</span></div>
		<div class="cont">
			<div class="useraccount"><input type="text" placeholder="请输入手机号" value="18339415612"/></div>
			<div class="userpassword"><input type="password" placeholder="请输入密码" value="123456789"/></div>
			<span class="span1">忘记密码?</span>
		</div>
		<div class="registered-login-choose"><span @click="cancel()">取消</span><span @click="getuser()">登录</span></div>
	</div>
	<!--注册-->
	<div class="registered-login tanchuang2 ">
		<div class="titles"><span>密码登录</span><span>注册</span><span>快速登录</span></div>
		<div class="cont">
			<div class="useraccount registered"><input type="text" placeholder="请输入手机号"/></div>
			<div class="verificationcode"><input type="text" placeholder="请输手机验证码"/></div>
			<span class="span2">获取验证码</span>
		</div>
		<div class="registered-login-choose"><span @click="cancel()">取消</span><span @click="registered()">注册</span></div>
	</div>
	<!--设置密码-->
	<div class="registered-login tanchuang3 ">
		<div class="titles"><span>密码登录</span><span>设置登录密码</span><span>快速登录</span></div>
		<div class="cont">
			<div class="setpassword1"><input type="text" placeholder="请输入密码(6-32位)"/></div>
			<div class="setpassword2"><input type="text" placeholder="请再次输入密码(6-32位)"/></div>
		</div>
		<div class="registered-login-choose"><span @click="cancel()">取消</span><span @click="tijiao()">提交</span></div>
	</div>
	
	
</div>
</template>
<script type="text/javascript">
	import Gheader from "./person-center/Gheader"
	import Scroll from "../../../base/Scroll"
	export default {
		name: 'PersonalCenter',
		data() {
			return {
				data: {
					word: "个人中心 ",
					left: [false, false, false],
					right: [true, true, false, false, false, true],
					leftword: "",
					rightword1: "",
					rightword2: ""
				},
				userhead: {
//					headportrait:"../../../../static/G-img/user.jpg",
//					name:"韩信"
					
				},
				usernumeral: [{
						time: "2017/02/26",
						consumption: 100,
						numeral: 10
					},
					{
						time: "2017/02/26",
						consumption: 100,
						numeral: 10
					},
					{
						time: "2017/02/26",
						consumption: 100,
						numeral: 10
					},
					{
						time: "2017/02/26",
						consumption: 100,
						numeral: 10
					},
					{
						time: "2017/02/26",
						consumption: 100,
						numeral: 10
					}
				],
				useraccount:""

			}
		},
		components: {
			Gheader,
			Scroll
		},
		methods: {
			gotodizhi:function  () {
				this.$router.push({
					path: "/AddNewAddress/"
				})
			},
			gotoInformation: function() {
				this.$router.push({
					path: "/Information/"
				})
			},
			gotoLookorder:function(){
				this.$router.push({
					path: "/order/"
				})
			},
			gotoUnpaid:function(){
				this.$router.push({
					path: "/Unpaid/"
				})
			},
			gotoDropshipping:function(){
				this.$router.push({
					path: "/Dropshipping/"
				})
			},
			gotoForthegoods:function(){
				this.$router.push({
					path: "/Forthegoods/"
				})
			},
			gotoThedeal:function(){
				this.$router.push({
					path: "/Thedeal/"
				})
			},
			tanchuang2:function(){
				$(".tanchuang2").css("display","block");
				$(".mask").css("display","block");	
				$(".registered-login-btn").css("z-index","11");
			},
			cancel:function  () {
				$(".tanchuang1").css("display","none");
				$(".tanchuang2").css("display","none");
				$(".tanchuang3").css("display","none");
				$(".registered-login-btn").css("z-index","13");
			},
			login:function  () {
				$(".tanchuang1").css("display","block");
				$(".mask").css("display","block");	
				$(".registered-login-btn").css("z-index","11");
			},
			cancelbtn:function  () {
				$(".registered-login-btn").css("display","none");
				$(".mask").css("display","none");	
				
			},
			gotologin:function  () {//上方登录/注册
				$(".registered-login-btn").css("display","block");
				$(".mask").css("display","block");	
				$(".registered-login-btn").css("z-index","13");
			},
			getuser:function  () {
				if($(".useraccount>input").val()!=""&&$(".userpassword>input").val()!=""){
					var useraccount = $(".useraccount>input").val();
					var userpassword  = $(".userpassword>input").val();
					console.log(useraccount,userpassword);
					$(".useraccount>input").val("");
					$(".userpassword>input").val("");
					this.axios.post("/api/login",{
						useraccount:useraccount,
						userpassword:userpassword
					}).then(function  (data) {
						if (data.data.errs) {
							$(".mask,.registered-login,.registered-login-btn").css("display","none");
							var ordername = data.data.results[0].ordername;
							this.$store.commit('pushpersonInfor',{login:data.data.results[0]});
							//再次发去数据请求
							this.axios.post("/api/selectuser",{
								ordername:ordername
							}).then(function  (data) {
								if (data.data.errs) {
									this.$store.commit('pushpersonInfor',{selectuser:data.data.results});
									console.log(this.$store.state.personInfor[0].login);
									this.userhead=this.$store.state.personInfor[0].login
									console.log(this.cookie.hasKey("user"));
									if(this.cookie.hasKey("useraccount")){
										this.cookie.deleteCookie("useraccount");
										this.cookie.deleteCookie("userpassword");
										this.cookie.addCookie("useraccount",useraccount,10000000);
										this.cookie.addCookie("userpassword",userpassword,10000000);
									}else{
										this.cookie.addCookie("useraccount",useraccount,10000000);
										this.cookie.addCookie("userpassword",userpassword,10000000);
									}
								}
								
								
							}.bind(this));
							
						} else{
							console.log(data.data.msg);
							alert("手机号或密码错误!");
						}
					}.bind(this));//bind(this)改变this指向
				}else{
					alert("手机号或密码不能为空!");
					
				}
				
			},
			registered:function  () {
				var useraccount = $(".registered>input").val();
				var verificationcode=$(".verificationcode>input").val();
				if (useraccount=="") {
					alert("请输入手机号");
				}else if (verificationcode=="") {
					alert("请输入验证码");
				} else{
					$(".tanchuang2").css("display","none");
					$(".tanchuang3").css("display","block");
					this.useraccount  = useraccount;
				}
				
			},
			tijiao:function  () {
				console.log(this.useraccount);
				var setpassword1 = $(".setpassword1>input").val();
					var setpassword2 = $(".setpassword2>input").val();
					if (setpassword1!=""&&setpassword2!="") {
						if (setpassword1==setpassword2) {
							console.log(this.useraccount);
							alert("注册成功");
						    console.log(setpassword1,setpassword2); 
						    $(".tanchuang3").css("display","none");
						    $(".mask").css("display","none");
						    $(".registered-login-btn").css("display","none");
						    this.axios.post("/api/registered",{
						   	useraccount:this.useraccount,
						   setpassword1:setpassword1
						    }).then(function  (data) {
						    		console.log(data)
						    }.bind(this));
						    
						} else{
							console.log("两次输入的密码不一样");
						}
					} else{
						console.log("请按提示输入密码");
					}
			}
			
		},
		computed:{
			listen(){
				return this.$store.state.personInfor
			}
		},
		watch:{
				listen:function(news,old){
					if(this.$store.state.personInfor.length!=0){
						this.userhead=this.$store.state.personInfor[0].login
					}
				}
		},
		created:function  () {

				if(this.$store.state.personInfor.length!=0){
					this.userhead=this.$store.state.personInfor[0].login
				}
							
		},
		mounted:function(){
							if(this.$route.params.flag==1){

					this.gotologin();
				}
		}
	}
</script>
<style scoped>
	.wrapper{
		overflow: hidden;
		height: 80vh;
	}
	.wrap {
		background: #f2f2f2;
		overflow: hidden;
	}
	/*
	 * 1.头像及背景
	 */
	
	.head-portrait {
		width: 94.4%;
		padding: 3.11vh 2.8% 0;
		height: 13.106vh;
		background: #fee3e3;
		position: relative;
	}
	
	.photo-name span {
		height: 4.792rem;
	}
	
	.photo-name {
		position: relative;
		height: 4.792rem;
	}
	
	.photo {
		display: inline-block;
		width: 4.792rem;
		height: 4.792rem;
		background: #D26060;
		position: absolute;
		border-radius: 50%;
		top: 0;
		left: 0;
	}
	
	.photo img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.photo-name p {
		display: inline-block;
		font-size: 1.437rem;
		margin-top: -0.9rem;
		position: absolute;
		top: 50%;
		left: 5.742rem;
	}
	
	.withdrawal {
		font-size: 1.15rem;
		width: 6.708rem;
		line-height: 1.92rem;
		text-align: center;
		background: #d26060;
		border-radius: 0.96rem;
		position: absolute;
		bottom: 1rem;
		right: 2.8%;
	}
	
	.withdrawal a {
		color: white;
		/*line-height: 1.92rem;*/
	}
	/*
	 * 我的订单
	 */
	
	.order {
		padding-top: 1.623vh;
		height: 7.523rem;
		background: #FFFFFF;
		margin-bottom: 0.958rem;
	}
	/*上方标题*/
	
	.title-more {
		width: 94.4%;
		padding: 0 2.8%;
		height: 2.683rem;
		background: #fff;
		color: #4d4d4d;
		border-bottom: 1px solid #cccccc;
	}
	
	.title {
		float: left;
		font-size: 1.438rem;
	}
	
	.more {
		margin-top: 0.4rem;
		padding-right: 1rem;
		float: right;
		font-size: 1.102rem;
		line-height: 1.102rem;
		background: url(../../assets/G-img/箭头.png) no-repeat;
		background-position: 100% 20%;
		background-size: 15% 80%;
	}
	/*待支付,代发货,待收货及交易完成*/
	
	.trading>ul {
		height: 100%;
		height: 4.792rem;
		text-align: center;
	}
	
	.trading>ul li {
		float: left;
		display: inline-block;
		width: 25%;
		height: 2.00rem;
		padding-top: 2.80rem;
		color: #999999;
	}
	
	.trading>ul li>span {
		font-size: 1.246rem;
	}
	
	.trading>ul .bg-1 {
		background: url(../../assets/G-img/order/待支付.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.trading>ul .bg-2 {
		background: url(../../assets/G-img/order/代发货.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.trading>ul .bg-3 {
		background: url(../../assets/G-img/order/待收货.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.trading>ul .bg-4 {
		background: url(../../assets/G-img/order/交易完成.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	/*我的反金排号*/
	
	.numeral-title {
		width: 94.4%;
		padding: 0 2.8%;
		height: 3.833rem;
		background: white;
		line-height: 3.833rem;
		color: #4d4d4d;
	}
	
	.numeral-title-left {
		float: left;
		font-size: 1.238rem;
	}
	
	.numeral-title-right {
		float: right;
		font-size: 1.08rem;
		padding-right: 1.3rem;
		background: url(../../assets/G-img/order/向下箭头.png) no-repeat;
		background-position: 100% 50%;
		background-size: 1.08rem;
	}
	
	.numeral ul>li {
		background: white;
		height: 3.833rem;
		line-height: 3.833rem;
		text-align: center;
		border-top: 1px solid #cccccc;
	}
	
	.numeral>ul>li>span {
		font-size: 1.238rem;
		display: inline-block;
		height: 100%;
		width: 32%;
		color: #999999;
	}
	
	.numeral {
		margin-bottom: 0.950rem;
	}
	/*
	 * <!--多功能区-->
	 * 
	 */
	
	.functional-areas {
		margin-bottom: 10rem;
	}
	
	.functional-areas ul {
		font-size: 0;
	}
	
	.functional-areas-top ul>li,
	.functional-areas-bottom ul>li {
		background: white;
		font-size: 0.958rem;
		display: inline-block;
		width: 25%;
		text-align: center;
		font-size: 1.2rem;
	}
	
	.functional-areas-top ul {
		border-bottom: 1px solid #CCCCCC;
	}
	
	.functional-areas-top ul>li span {
		display: inline-block;
		line-height: 2.40rem;
		width: 100%;
	}
	
	.functional-areas-top ul>li span:nth-child(1) {
		font-size: 1.5rem;
		color: red;
	}
	
	.functional-areas-bottom ul>li span {
		display: inline-block;
		width: 100%;
		padding-top: 2.8rem;
		line-height: 2.00rem;
	}
	
	.functional-areas-bottom ul>li .bg-1 {
		background: url(../../assets/G-img/concern-me/实名认证.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.functional-areas-bottom ul>li .bg-2 {
		background: url(../../assets/G-img/concern-me/收货地址.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.functional-areas-bottom ul>li .bg-3 {
		background: url(../../assets/G-img/concern-me/关注微信公众号.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	
	.functional-areas-bottom ul>li .bg-4 {
		background: url(../../assets/G-img/concern-me/客服.png) no-repeat;
		background-size: 25% 40%;
		background-position: 50% 20%;
	}
	/*登录与注册按钮*/
	
	.registered-login-btn{
		display: none;
		width: 100%;
		padding-top: 5vh;
		height: 25vh;
		position: fixed;
		bottom: 0;
		left: 0;
		background: white;
		z-index: 11;
		text-align: center;
	}
	.registered-login-btn span:nth-child(1){
		color: white;
		background: red;
	}
	.registered-login-btn span{
		font-size: 1.3rem;
		display: block;
		height: 3rem;
		border: 1px  solid #CCCCCC;
		line-height:3rem;
		border-radius: 1.5rem;
		margin-top: 1rem ;
		margin-left: 10%;
		margin-right: 10%;
	}
	.registered-login-btn>div{
		position: absolute;
		top: 0.5rem;
		right: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		background: url(../../assets/D-img/删除.png) no-repeat;
		background-size: 100%;
	}
	.mask{
		display: none;
		width: 100%;
		height: 100vh;
		background:#000000;
		position: fixed;
		top: 0;
		opacity: 0.5;
		z-index: 12;
	}
	
	/*登录与注册 弹窗*/
	
	.registered-login{
		position: fixed;
		bottom: 25vh;
		background: #e53e42;
		height: 11.53rem;
		border-radius:5px ; 
		width: 94.4%;
		margin:0 2.8%;
		z-index: 13;
	}
	.tanchuang1 {
		display: none;
	}
	.tanchuang2{
		display: none;
	}
	.tanchuang3{
		display: none;
	}
	.register{
		position:fixed;
		top: 50%;
		background: white;
	}
	.register{
		display: block;/**/
		background:white;
	}
	.registered-login .titles,.register .titles{
		display: block;
		height: 1.958rem;
		line-height: 1.958rem;
		width: 100%;
		background: white;
		font-size:1.3rem ;
		margin-top: 0.36rem;
		border-bottom: 1px solid #CCCCCC; 
	}
	.registered-login .titles>span{
		display: inline-block;
		text-align: center;
	}
	.registered-login .titles>span:nth-child(1),.registered-login .titles>span:nth-child(3){
		font-size: 1.1rem;
		width: 30%;
	}
	.registered-login .titles>span:nth-child(2){
		width: 40%;
	}
	.cont{
		height: 7.944rem;
		background: white;
		padding-top: 1.08rem;
		position: relative;
	}
	.registered-login-choose{
		height: 3.06rem;
		background: white;
		border-bottom-left-radius:5px;
		border-bottom-right-radius: 5px; 
		border-top:1px  solid #CCCCCC;
	}
	.registered-login-choose span{
		
		display: inline-block;
		width: 49%;
		height: 100%;
		text-align: center;
		line-height: 3.06rem;
		font-size: 1.3rem;
	}
	.registered-login-choose span:nth-child(2){
		border-left:1px  solid #CCCCCC ;
		color: red;
	}
	.cont>div{
		height: 1.7rem;
  		margin: 0 10%;
  		padding: 0.5rem 0;
  		border: 1px  solid #CCCCCC;
  		border-radius:1.38rem;
	}
	.cont>div>input{
		display: inline-block;
		width: 70%;
		border: 0;
		border-left:1px  solid #CCCCCC ;
		margin-left: 3rem;
		height: 1.7rem;
		font-size: 1.1rem;
		padding-left: 0.5rem;
		outline: none;
	}
	.cont>.useraccount{
		margin-bottom: 0.36rem;
		background:url(../../assets/G-img/手机图标.png) no-repeat ;
		background-size:1.3rem ;
		background-position:5% 50% ;
		
	}
	/*用户密码*/
	.cont>.userpassword{
		background:url(../../assets/G-img/密码图标.png) no-repeat ;
		background-size:1.3rem ;
		background-position:5% 50% ;
	}
	/*用户验证码*/
	.cont>.verificationcode{
		display: inline-block;
		width: 50%;
		background:url(../../assets/G-img/密码图标.png) no-repeat ;
		background-size:1.3rem ;
		background-position:8% 50% ;
		margin-right: 5%;
	}
	.cont>.verificationcode input{
		width: 70%;
		
	} 
	.cont>.setpassword1,.cont>.setpassword2{
		margin-bottom: 1rem;
		background:url(../../assets/G-img/密码图标.png) no-repeat ;
		background-size:1.3rem ;
		background-position:5% 50% ;
		margin-right: 5%;
	}
    .cont>.span2{
    		text-align: center;
    		width: 22%;
	    	display: inline-block;
		padding: 0.5rem 0;
		border: 1px  solid #CCCCCC;
		border-radius:1.38rem;
		font-size: 1.2rem;
    }
	.cont>.span1{
		font-size:1rem ;
		position: absolute;
		bottom: 0.2rem;
		right: 1rem;
		color: red;
	}
</style>